//符
//验证码登录

<template>
  <div class="all_login2">
    <div class="bg_login2">
      <img src="../assets/andrea-rodriguez-m1tTo-2qTCA-unsplash.jpg" alt="" />
    </div>
    <!--背景-->
    <div class="login2">
      <h1 class="title_login2">登录</h1>
      <div class="line2"></div>
      <div class="inputBOX">
        <div class="emailbox">
          <div class="word_email">邮箱</div>
          <input
            class="inputEmail"
            type="text"
            name="email"
            v-model="username"
          />
          <button class="get_code" @click="getCode()">获取验证码</button>
        </div>
        <div class="securityCode">
          <div class="word_code">验证码</div>
          <input
            class="inputCode"
            type="text"
            name="securityCode"
            v-model="password"
            @keyup.enter="loginCode()"
          />
        </div>
        <button class="btn_login" @click="loginCode()">登录</button>
        <div class="login_box">
          <router-link to="/loginPwd" class="other_pwd"
            >账号密码登录</router-link
          >
        </div>
        <div class="register_box">
          <router-link to="/register" class="register"
            >没有账号？点击注册</router-link
          >
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "loginCode",
  components: "",
  data() {
    return {
      type: "",
      email: "",
      username: "",
      password: "",
      access: "",
    };
  },
  methods: {
    getCode() {
      this.$http
        .post("/email/login/", {
          email: this.username,
        })
        .then((res) => {
          // this.code = res.data.code;
          if (res.data.code == 20000) {
            alert("发送成功");
          }
          // if (this.code != 20000) {
          //   alert("获取验证码失败");
          // } else {
          //   alert("获取验证码成功");
          //   };
        });

      //$http === axios
    },
    loginCode() {
      if (this.username == "" || this.password == "")
        alert("请填写邮箱或验证码");
      else {
        this.$http
          .post("/login/", {
            //  params: {
            type: "email",
            username: this.username,
            password: this.password,
            //  },
          })
          //回调函数
          .then((res) => {
            if (res.data.code == 20000) {
              alert("登录成功!");
              this.$router.push({
                path: "/mainPage",
                id: 1,
              });
              sessionStorage.setItem(
                "token",
                JSON.stringify(res.data.data.access)
              );
              sessionStorage.setItem("user", JSON.stringify(this.username));
              this.$root.isToken++;
              this.$http
                .get("/user/info/", {
                  headers: {
                    Authorization:
                      "Bearer " + JSON.parse(sessionStorage.getItem("token")),
                  },
                })
                .then((res) => {
                  sessionStorage.setItem(
                    "ID",
                    JSON.stringify(res.data.data.id)
                  );
                });
            } else {
              alert(res.data.msg);
            }
          })
          .catch(function (error) {
            if (error.response.status == 401) {
              alert("验证码错了哦！");
            } else {
              alert("发生意外错误了！");
            }
          });
      }
    },
  },
};
</script>
<style scoped>
a:-webkit-any-link {
  text-decoration: none;
}
/* 上下改法结果一致 */
/* a, a:visited, a:hover, a:active {
text-decoration: none;
color: inherit;
} */
.all_login2 {
  /* width: 100%; */
  /* width: 1920px; */
  /* height: 875px; */
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.bg_login2 {
  position: relative;
  width: 100%;
  height: 875px; /**高给死了 待改 */
  margin: 0 auto;
  overflow: hidden; /**防止背景超出 */
  text-align: center;
}
.bg_login2 img {
  filter: blur(4px);
  width: 130%;
  height: 120%;
  margin-top: -10px;
  object-fit: cover;
  margin-left: -10px;
}
.bg_login2::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 110%;
  height: 100%;
  opacity: 0.3;
  background: #000;
}
.login2 {
  position: absolute; /**定位默认置底？！ */
  top: 0px;
  float: 8px;
  /* z-index: 5; */
  width: 1920px;
  padding: 112px 0 251px 0;
  background-color: transparent;
}
.title_login2 {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 58px;
  font-size: 60px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.line2 {
  /* overflow: hidden; */
  margin: 52px auto 62px;
  width: 1435px;
  height: 6px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 3px;
}
.inputBOX {
  /* overflow: hidden; */
  margin: 0 auto;
  width: 1435px;
}
.emailbox {
  width: 520px;
  margin: 0 502px 31px 415px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.securityCode {
  width: 546px; /**546 */
  margin: 0 496px 0 394px; /*388*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.get_code {
  width: 140px;
  height: 41px;
  margin-left: -180px;
  text-align: center;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 20px;
  border: 0 none transparent;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 41px;
  letter-spacing: 1px;
}
.get_code {
  cursor: pointer;
}
.word_email {
  /* width: 49px; */
  margin-right: -8px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
}
.word_code {
  /* width: 49px; */
  margin-right: 3px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
}
input {
  border: 0 none transparent;
  outline: none;
  width: 440px;
  height: 60px;
  /* margin-left: 3px; */
  font-size: 24px;
  letter-spacing: 1px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
  border-radius: 30px;
  text-indent: 8px;
  font-size: 22px;
}
.btn_login {
  display: block; /**botton是行内块元素？？ */
  margin: 51px auto 0px;
  width: 440px;
  height: 80px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 39px;
  font-size: 36px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  border: 0 none transparent;
}
.btn_login:hover {
  cursor: pointer;
}
.other_pwd {
  margin: 22px auto 0;
  width: 128px;
  height: 20px;
  font-size: 20px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 20px;
}
.register {
  width: 200px;
  margin: 5px auto;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}

/* 更改样式 */
.login_box {
  display: flex;
  align-items: center;
}
.login_box .other_pwd {
  transition: all 0.2s;
}
.login_box .other_pwd:hover {
  color: #659274;
}
.register_box {
  margin-top: 5px;
  display: flex;
  align-items: center;
  text-align: center;
}
.register_box .register {
  transition: all 0.3s;
}
.register_box .register:hover {
  color: #659274;
}
</style>